Login Page
A CSS-styled login page provides a user-friendly interface for authentication. Elements like form fields for username/email and password, along with buttons and optional links for password recovery or registration, are designed to enhance usability. CSS ensures the page is visually appealing with consistent styling, such as input fields, buttons, and text alignment, creating a professional and intuitive login experience for website visitors.
Example of Login Page
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
background-color: #C0DBF0 ;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
.login-form {
display: flex;
flex-direction: column;
}
.login-form h2 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
font-weight: bold;
}
.form-group input {
padding: 8px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 4px;
}
button:hover {
background-color: #45a049;
}
.register-link {
text-align: center;
margin-top: 10px;
}
.register-link a {
color: #007bff;
text-decoration: none;
}
.register-link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-container">
<form action="#" method="POST" class="login-form">
<h2>Login</h2>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
<p class="register-link">Don't have an account? <a href="#">Register here</a></p>
</form>
</div>
</body>
</html>
]]>
OUTPUT:
Example 2
<![CDATA[
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
background-image: url(backimage.webp);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
.login-form {
display: flex;
flex-direction: column;
}
.login-form h2 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
font-weight: bold;
}
.form-group input {
padding: 8px;
width: 100%;
box-sizing: border-box;
border: 3px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px;
background-color: #182733;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: tomato;
}
.register-link {
text-align: center;
margin-top: 10px;
}
.register-link a {
color: #007bff;
text-decoration: none;
}
.register-link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="login-container">
<form action="#" method="POST" class="login-form">
<h2>Login</h2>
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">Login</button>
<p class="register-link">Don't have an account? <a href="#">Register here</a></p>
</form>
</div>
</body>
</html>
]]>
OUTPUT:
Conclusion :
In conclusion, login page styled with CSS enhances user experience by providing a visually appealing and intuitive interface. CSS allows for customization of layout, colors, and fonts, ensuring the page aligns with brand identity. Moreover, CSS facilitates responsiveness, making the login page accessible on various devices without compromising design integrity. Overall, a well-designed CSS login page not only improves usability but also reinforces brand consistency, thereby fostering a positive user perception and interaction.
SHARE
